সিএসএস ফ্লেক্সবক্স মাস্টারি: অ্যাডভান্সড অ্যালাইনমেন্ট ও ডিস্ট্রিবিউশন

বেশ কয়েক বছর ধরে, সিএসএস ফ্লেক্সবক্স আধুনিক ওয়েব লেআউটের একটি ভিত্তি হয়ে উঠেছে। বেশিরভাগ ডেভেলপাররা display: flex ব্যবহার করে আইটেমগুলোকে একটি সারিতে সাজাতে বা সাধারণ সেন্টার্ড কম্পোনেন্ট তৈরি করতে স্বচ্ছন্দ। কিন্তু ফ্লেক্সবক্সের আসল দক্ষতা এর আরও সূক্ষ্ম বৈশিষ্ট্যগুলো বোঝার মধ্যে নিহিত, যা অ্যাডভান্সড অ্যালাইনমেন্ট এবং ডাইনামিক ডিস্ট্রিবিউশনের জন্য ব্যবহৃত হয়। যখন আপনি justify-content: center এবং align-items: center এর বেসিক ব্যবহার ছাড়িয়ে যাবেন, তখন আপনি আশ্চর্যজনক সহজে জটিল, রেসপন্সিভ এবং নমনীয় লেআউট তৈরি করার ক্ষমতা আনলক করবেন।

এই গাইডটি সেইসব ডেভেলপারদের জন্য যারা মূল বিষয়গুলো জানেন কিন্তু তাদের জ্ঞানকে আরও গভীর করতে চান। আমরা সেইসব প্রোপার্টিগুলো নিয়ে আলোচনা করব যা মাল্টি-লাইন অ্যালাইনমেন্ট নিয়ন্ত্রণ করে, ফ্লেক্স আইটেমগুলো কীভাবে বড় হয় এবং ছোট হয় তার পেছনের জটিল যুক্তি এবং সাধারণ লেআউট চ্যালেঞ্জগুলো সমাধান করার জন্য বেশ কিছু শক্তিশালী প্যাটার্ন দেখব। একজন সাধারণ ব্যবহারকারী থেকে একজন আত্মবিশ্বাসী ফ্লেক্সবক্স আর্কিটেক্ট হওয়ার জন্য প্রস্তুত হন।

ভিত্তি: মেইন এবং ক্রস অ্যাক্সিসের একটি দ্রুত পুনরালোচনা

অ্যাডভান্সড টপিকে যাওয়ার আগে, প্রতিটি ফ্লেক্স কন্টেইনারকে নিয়ন্ত্রণকারী দুটি অ্যাক্সিস সম্পর্কে একটি স্বচ্ছ ধারণা থাকা অত্যন্ত গুরুত্বপূর্ণ। ফ্লেক্সবক্সের সমস্ত অ্যালাইনমেন্ট এবং ডিস্ট্রিবিউশন প্রোপার্টি এই দুটি অ্যাক্সিসের একটি বরাবর কাজ করে।

• মেইন অ্যাক্সিস (Main Axis): এটি হলো প্রাথমিক অক্ষ যার ওপর ভিত্তি করে ফ্লেক্স আইটেমগুলো সাজানো হয়। এর দিক flex-direction প্রোপার্টি দ্বারা নির্ধারিত হয়।
• ক্রস অ্যাক্সিস (Cross Axis): এই অক্ষটি সর্বদা মেইন অ্যাক্সিসের সাথে লম্বভাবে থাকে।

মূল বিষয়টি হলো এই অ্যাক্সিসগুলো স্থির নয়। আপনার flex-direction ভ্যালুর উপর ভিত্তি করে এগুলো নিজেদের দিক পরিবর্তন করে:

• flex-direction: row (ডিফল্ট): মেইন অ্যাক্সিস অনুভূমিক (বাম-থেকে-ডান), এবং ক্রস অ্যাক্সিস উল্লম্ব (উপর-থেকে-নিচ)।
• flex-direction: column: মেইন অ্যাক্সিস উল্লম্ব (উপর-থেকে-নিচ) হয়ে যায়, এবং ক্রস অ্যাক্সিস অনুভূমিক (বাম-থেকে-ডান) হয়ে যায়।
• flex-direction: row-reverse: মেইন অ্যাক্সিস অনুভূমিক থাকে কিন্তু ডান-থেকে-বামে চলে।
• flex-direction: column-reverse: মেইন অ্যাক্সিস উল্লম্ব থাকে কিন্তু নিচ-থেকে-উপরে চলে।

এই মৌলিক ধারণাটি ভুলে যাওয়া ফ্লেক্সবক্স সম্পর্কিত বেশিরভাগ বিভ্রান্তির উৎস। একটি অ্যালাইনমেন্ট প্রোপার্টি প্রয়োগ করার আগে সর্বদা নিজেকে জিজ্ঞাসা করুন: "আমার মেইন অ্যাক্সিস কোন দিকে নির্দেশ করছে?"

justify-content এর মাধ্যমে মেইন অ্যাক্সিস ডিস্ট্রিবিউশনে দক্ষতা অর্জন

justify-content প্রোপার্টি ফ্লেক্স আইটেমগুলোর মধ্যে এবং চারপাশে মেইন অ্যাক্সিস বরাবর স্পেস কীভাবে বিতরণ করা হবে তা নিয়ন্ত্রণ করে। যদিও flex-start, flex-end, এবং center বেশ সহজবোধ্য, আসল শক্তিটি স্পেস-ডিস্ট্রিবিউশন ভ্যালুগুলোর মধ্যে নিহিত।

স্পেস ডিস্ট্রিবিউশনের গভীরে

আসুন space-between, space-around, এবং space-evenly এর মধ্যে সূক্ষ্ম কিন্তু গুরুত্বপূর্ণ পার্থক্যগুলো স্পষ্ট করি।

• justify-content: space-between;

  এই ভ্যালুটি আইটেমগুলোকে মেইন অ্যাক্সিসে সমানভাবে বিতরণ করে। প্রথম আইটেমটিকে কন্টেইনারের একেবারে শুরুতে এবং শেষ আইটেমটিকে একেবারে শেষে ঠেলে দেওয়া হয়। বাকি সমস্ত স্পেস আইটেমগুলোর মাঝে সমানভাবে ভাগ করা হয়। বাইরের প্রান্তে কোনো স্পেস থাকে না।

  ব্যবহারের ক্ষেত্র: নেভিগেশন বারের জন্য এটি উপযুক্ত, যেখানে আপনি লোগোটি একেবারে বামে এবং লিঙ্কগুলো একেবারে ডানে চান, এবং লিঙ্কগুলোর মধ্যে সমান ব্যবধান থাকবে।

• justify-content: space-around;

  এই ভ্যালুটি প্রতিটি আইটেমের চারপাশে সমান স্পেস দিয়ে আইটেমগুলো বিতরণ করে। ভাবুন প্রতিটি আইটেমের বাম এবং ডান উভয় দিকে একটি স্পেসের "বুদবুদ" আছে। যখন সংলগ্ন আইটেমগুলোর বুদবুদ মিলিত হয়, তখন তাদের মাঝের স্পেস কন্টেইনারের প্রান্তের স্পেসের দ্বিগুণ বলে মনে হয়। নির্দিষ্টভাবে, বাইরের প্রান্তের স্পেস আইটেমগুলোর মাঝের স্পেসের অর্ধেক হয়।

  ব্যবহারের ক্ষেত্র: কার্ড লেআউট বা গ্যালারির জন্য উপযোগী, যেখানে আপনি চান আইটেমগুলো কন্টেইনারের প্রান্ত থেকে কিছুটা দূরে থাকুক, কিন্তু একেবারে লেগে না থাকুক।

• justify-content: space-evenly;

  এটি তিনটির মধ্যে সবচেয়ে সহজবোধ্য। এটি নিশ্চিত করে যে যেকোনো দুটি আইটেমের মধ্যবর্তী স্পেস, প্রথম/শেষ আইটেম এবং কন্টেইনারের প্রান্তের মধ্যবর্তী স্পেসের সমান। প্রতিটি গ্যাপ অভিন্ন।

  ব্যবহারের ক্ষেত্র: যখন আপনার একটি সম্পূর্ণ ভারসাম্যপূর্ণ, প্রতিসম লেআউট প্রয়োজন তখন এটি আদর্শ। ডিজাইনাররা যখন "সমান স্পেসিং" চান, তখন প্রায়শই তারা এটিই বোঝান।

align-items এবং align-self দিয়ে ক্রস অ্যাক্সিস অ্যালাইনমেন্ট জয় করা

যেখানে justify-content মেইন অ্যাক্সিস পরিচালনা করে, সেখানে align-items একটি একক লাইনের মধ্যে ক্রস অ্যাক্সিস বরাবর আইটেমগুলোর ডিফল্ট অ্যালাইনমেন্ট পরিচালনা করে।

`align-items` ভ্যালুগুলো বোঝা

• align-items: stretch; (ডিফল্ট): এই কারণেই আপনার ফ্লেক্স আইটেমগুলো প্রায়শই আপনার বলা ছাড়াই তাদের কন্টেইনারের উচ্চতা পূরণ করে। আইটেমগুলো ক্রস অ্যাক্সিস বরাবর কন্টেইনারের আকার পূরণ করতে প্রসারিত হবে (যেমন, `flex-direction: row` কন্টেইনারে উচ্চতা)।
• align-items: flex-start;: আইটেমগুলো ক্রস অ্যাক্সিসের শুরুতে প্যাক করা হয়।
• align-items: flex-end;: আইটেমগুলো ক্রস অ্যাক্সিসের শেষে প্যাক করা হয়।
• align-items: center;: আইটেমগুলো ক্রস অ্যাক্সিস বরাবর কেন্দ্রে থাকে।
• align-items: baseline;: এটি একটি শক্তিশালী এবং কম ব্যবহৃত ভ্যালু। আইটেমগুলো এমনভাবে অ্যালাইন করা হয় যাতে তাদের টেক্সট বেসলাইনগুলো সারিবদ্ধ হয়। এটি অবিশ্বাস্যভাবে দরকারী যখন আপনার বিভিন্ন ফন্ট আকারের আইটেম থাকে (যেমন, একটি সাবটাইটেলের পাশে একটি মূল শিরোনাম) এবং আপনি চান যে তারা কেবল তাদের বক্সের সীমানা দ্বারা নয়, টেক্সচুয়ালি অ্যালাইন হোক।

align-self দিয়ে ওভাররাইড করা

যদি আপনি চান একটি নির্দিষ্ট আইটেম অন্যদের থেকে ভিন্ন আচরণ করুক? সেখানেই align-self কাজে আসে। একটি পৃথক ফ্লেক্স আইটেমের উপর প্রয়োগ করা হলে, এটি শুধুমাত্র সেই আইটেমের জন্য কন্টেইনারের align-items প্রোপার্টিকে ওভাররাইড করে। এটি align-items এর সমস্ত একই ভ্যালু গ্রহণ করে (সাথে `auto`, যা এটিকে কন্টেইনারের ভ্যালুতে রিসেট করে)।

উদাহরণ: এক সারি কার্ডের কথা ভাবুন, সবগুলো align-items: center দিয়ে কেন্দ্রে অবস্থিত। আপনি একটি "ফিচার্ড" কার্ডকে align-self: stretch; প্রয়োগ করে অন্যদের থেকে লম্বা করে তুলতে পারেন।

অনালোচিত নায়ক: align-content দিয়ে অ্যাডভান্সড ডিস্ট্রিবিউশন

এটি সম্ভবত ফ্লেক্সবক্সের সবচেয়ে ভুল বোঝা প্রোপার্টি, এবং এতে দক্ষতা অর্জন করা অ্যাডভান্সড পারদর্শিতার একটি চিহ্ন। align-items এর সাথে এর সাদৃশ্য একটি সাধারণ বিভ্রান্তির কারণ।

এখানে সমালোচনামূলক নিয়মটি হলো: যখন আপনার ফ্লেক্স আইটেমগুলো একটি একক লাইনে থাকে তখন align-content এর কোনো প্রভাব নেই। এটি কেবল তখনই কাজ করে যখন আপনার একটি মাল্টি-লাইন ফ্লেক্স কন্টেইনার থাকে (অর্থাৎ, আপনি flex-wrap: wrap; সেট করেছেন এবং আইটেমগুলো নতুন লাইনে র‍্যাপ করেছে)।

এভাবে ভাবুন:

• align-items আইটেমগুলোকে তাদের লাইনের মধ্যে অ্যালাইন করে।
• align-content লাইনগুলোকেই কন্টেইনারের মধ্যে অ্যালাইন করে। এটি আইটেমের সারিগুলোর মধ্যে ক্রস অ্যাক্সিসে স্পেসের বিতরণ নিয়ন্ত্রণ করে।

এটি মূলত justify-content এর মতো কাজ করে, কিন্তু ক্রস অ্যাক্সিসের জন্য। এর ভ্যালুগুলো প্রায় একই রকম:

• align-content: flex-start; (ডিফল্ট): সমস্ত লাইন কন্টেইনারের শুরুতে প্যাক করা হয়।
• align-content: flex-end;: সমস্ত লাইন শেষে প্যাক করা হয়।
• align-content: center;: সমস্ত লাইন কেন্দ্রে প্যাক করা হয়।
• align-content: space-between;: প্রথম লাইনটি শুরুতে, শেষ লাইনটি শেষে থাকে এবং লাইনগুলোর মধ্যে স্পেস সমানভাবে বিতরণ করা হয়।
• align-content: space-around;: প্রতিটি লাইনের চারপাশে সমান স্পেস রাখা হয়।
• align-content: space-evenly;: প্রতিটি লাইনের মধ্যে স্পেসিং অভিন্ন।
• align-content: stretch;: লাইনগুলো বাকি স্থান দখল করার জন্য প্রসারিত হয়।

ব্যবহারের ক্ষেত্র: একটি ফটো গ্যালারির কথা ভাবুন যেখানে আইটেমগুলো র‍্যাপ করে। যদি কন্টেইনারটির একটি নির্দিষ্ট উচ্চতা থাকে, তবে অতিরিক্ত উল্লম্ব স্থান বাকি থাকতে পারে। ডিফল্টরূপে, এই স্থানটি নীচে প্রদর্শিত হয়। align-content: space-between; বা align-content: center; ব্যবহার করে, আপনি আপনার পুরো ফটো গ্রিডের উল্লম্ব বিতরণ নিয়ন্ত্রণ করতে পারেন, যা একটি অনেক বেশি পেশাদার চেহারার লেআউট তৈরি করে।

ডাইনামিক সাইজিং এবং ডিস্ট্রিবিউশন: flex শর্টহ্যান্ড

স্ট্যাটিক লেআউট বিরল। ফ্লেক্সবক্সের আসল শক্তি হলো ডাইনামিক কন্টেন্ট এবং উপলব্ধ স্থান পরিচালনা করার ক্ষমতা। এটি তিনটি প্রোপার্টি দ্বারা নিয়ন্ত্রিত হয়, যা প্রায়শই flex শর্টহ্যান্ডের মাধ্যমে সেট করা হয়: flex-grow, flex-shrink, এবং flex-basis।

১. flex-basis: প্রারম্ভিক বিন্দু

কোনো বড় বা ছোট হওয়ার আগে, ফ্লেক্সবক্সের প্রতিটি আইটেমের জন্য একটি প্রারম্ভিক আকারের প্রয়োজন হয়। এটি flex-basis এর কাজ। এটি মেইন অ্যাক্সিস বরাবর একটি উপাদানের ডিফল্ট আকার নির্ধারণ করে।

• যদি একটি নির্দিষ্ট দৈর্ঘ্যে সেট করা হয় (যেমন, 200px বা 10rem), তবে সেটি আইটেমের প্রাথমিক আকার হয়ে যায়।
• যদি auto তে সেট করা হয়, এটি আইটেমের `width` বা `height` প্রোপার্টি সন্ধান করে। যদি কোনোটি না থাকে, তবে এটি আইটেমের কন্টেন্টের উপর ভিত্তি করে আকার নির্ধারণ করে।
• যদি 0 তে সেট করা হয়, আইটেমের কোনো প্রারম্ভিক আকার থাকে না এবং এর চূড়ান্ত আকার সম্পূর্ণরূপে তার `flex-grow` অনুপাত দ্বারা নির্ধারিত হয়।

সেরা অভ্যাস: ফ্লেক্স কনটেক্সটে `width` এর পরিবর্তে flex-basis ব্যবহার করা প্রায়শই ভাল, কারণ এটি মেইন অ্যাক্সিসের প্রেক্ষাপটে আইটেমের আকার নির্ধারণে আরও সুস্পষ্ট।

২. flex-grow: পজিটিভ স্পেস গ্রহণ করা

যখন ফ্লেক্স কন্টেইনারের মেইন অ্যাক্সিস বরাবর অতিরিক্ত স্থান থাকে, তখন flex-grow নির্ধারণ করে যে সেই স্থান কীভাবে বিতরণ করা হবে। এটি একটি এককবিহীন অনুপাত।

• ডিফল্ট ভ্যালু হলো 0, যার অর্থ আইটেমগুলো অতিরিক্ত স্থান পূরণ করতে বাড়বে না।
• যদি সমস্ত আইটেমের flex-grow: 1 থাকে, তবে অতিরিক্ত স্থান তাদের মধ্যে সমানভাবে বিতরণ করা হবে।
• যদি একটি আইটেমের flex-grow: 2 এবং অন্যটির flex-grow: 1 থাকে, তবে প্রথম আইটেমটি দ্বিতীয়টির চেয়ে দ্বিগুণ অতিরিক্ত স্থান পাবে।

৩. flex-shrink: নেগেটিভ স্পেস (ওভারফ্লো) সামলানো

এটি `flex-grow` এর প্রতিপক্ষ। যখন কন্টেইনারে সমস্ত আইটেমকে তাদের `flex-basis` এ ফিট করার জন্য যথেষ্ট জায়গা থাকে না, তখন তাদের সঙ্কুচিত হতে হয়। flex-shrink নিয়ন্ত্রণ করে তারা কতটা সঙ্কুচিত হবে।

• ডিফল্ট ভ্যালু হলো 1, যার অর্থ ওভারফ্লো রোধ করতে সমস্ত আইটেম ডিফল্টরূপে আনুপাতিকভাবে সঙ্কুচিত হয়।
• যদি আপনি কোনো আইটেমে flex-shrink: 0 সেট করেন, তবে এটি সঙ্কুচিত হবে না। এটি তার `flex-basis` আকার বজায় রাখবে, যা কন্টেইনারকে ওভারফ্লো করতে পারে। এটি লোগো বা বোতামের মতো উপাদানগুলোর জন্য দরকারী যা কখনও সংকুচিত হওয়া উচিত নয়।

flex শর্টহ্যান্ড: সবকিছু একসাথে

flex প্রোপার্টি হলো flex-grow, flex-shrink, এবং flex-basis এর একটি শর্টহ্যান্ড, সেই ক্রমে।

• flex: 0 1 auto; (ডিফল্ট): আইটেমটি বাড়তে পারে না, সঙ্কুচিত হতে পারে এবং এর ভিত্তি তার width/height বা কন্টেন্ট দ্বারা নির্ধারিত হয়।
• flex: 1; (flex: 1 1 0; এর শর্টহ্যান্ড): একটি খুব সাধারণ ভ্যালু। আইটেমটি বাড়তে এবং সঙ্কুচিত হতে পারে এবং এর প্রারম্ভিক আকার ০। এটি কার্যকরভাবে আইটেমগুলোকে কেবল তাদের flex-grow অনুপাতের উপর ভিত্তি করে স্থান ভাগ করে নিতে সাহায্য করে।
• flex: auto; (flex: 1 1 auto; এর শর্টহ্যান্ড): আইটেমটি বাড়তে এবং সঙ্কুচিত হতে পারে এবং এর ভিত্তি তার কন্টেন্ট দ্বারা নির্ধারিত হয়। এটি আইটেমগুলোকে তাদের কন্টেন্টের উপর ভিত্তি করে ভিন্নভাবে আকার দিতে দেয়, কিন্তু তারপরও নমনীয়ভাবে অতিরিক্ত স্থান শোষণ করতে পারে।
• flex: none; (flex: 0 0 auto; এর শর্টহ্যান্ড): আইটেমটি সম্পূর্ণ অনমনীয়। এটি বাড়তে বা সঙ্কুচিত হতে পারে না।

বাস্তব ব্যবহারের ক্ষেত্র এবং অ্যাডভান্সড সিনারিও

সিনারিও ১: স্টিকি ফুটার (হলি গ্রেইল লেআউট)

একটি ক্লাসিক ওয়েব ডিজাইন সমস্যা: কীভাবে একটি ফুটারকে পৃষ্ঠার নীচে আটকে রাখা যায়, এমনকি যখন কন্টেন্ট কম থাকে, কিন্তু কন্টেন্ট দীর্ঘ হলে স্বাভাবিকভাবে নিচে ঠেলে দেওয়া হয়।

.page-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Viewport Height */
}

.main-content {
  flex-grow: 1; /* or flex: 1; */
}

মূল পৃষ্ঠা কন্টেইনারকে একটি কলাম-ভিত্তিক ফ্লেক্সবক্স তৈরি করে এবং মূল কন্টেন্ট এলাকাকে flex-grow: 1 সেট করে, আমরা এটিকে সমস্ত উপলব্ধ উল্লম্ব স্থান গ্রহণ করতে বলি, যা ফুটারকে ভিউপোর্টের নীচে ঠেলে দেয়।

সিনারিও ২: গ্রুপ বিভক্ত করার জন্য অটো মার্জিন

আপনি কীভাবে একটি নেভিগেশন বার তৈরি করবেন যেখানে একটি লোগো একেবারে বামে এবং একদল লিঙ্ক একেবারে ডানে থাকে? যদিও justify-content: space-between কাজ করে যদি লোগোটি একটি একক ফ্লেক্স আইটেম হয়, কিন্তু যদি আপনার ডানে একাধিক আইটেম থাকে?

এর সমাধান হলো ফ্লেক্সবক্সে অটো মার্জিনের জাদু।

.navbar {
  display: flex;
}

.logo {
  /* No special properties needed */
}

.nav-links {
  margin-left: auto;
}

একটি ফ্লেক্স কন্টেইনারে, একটি অটো মার্জিন যেদিকে প্রয়োগ করা হয় সেদিকের সমস্ত উপলব্ধ স্থান গ্রাস করে। নেভিগেশন লিঙ্কগুলোর গ্রুপে margin-left: auto সেট করার মাধ্যমে, এটি লোগো এবং লিঙ্কগুলোর মধ্যে একটি নমনীয়, খালি স্থান তৈরি করে, লিঙ্কগুলোকে একেবারে ডানে ঠেলে দেয়।

সিনারিও ৩: মিডিয়া অবজেক্ট

একটি সাধারণ UI প্যাটার্নে একপাশে একটি ছবি বা আইকন এবং অন্য দিকে বর্ণনামূলক টেক্সট থাকে। টেক্সটটি বাকি সমস্ত স্থান দখল করবে এবং সুন্দরভাবে র‍্যাপ করবে।

.media-object {
  display: flex;
  align-items: flex-start; /* Aligns image and text to the top */
}

.media-image {
  margin-right: 1rem;
  flex-shrink: 0; /* Prevents the image from being squished */
}

.media-body {
  flex-grow: 1; /* Takes up all remaining horizontal space */
}

এখানে, টেক্সট কন্টেইনারে flex-grow: 1 হলো মূল চাবিকাঠি। এটি নিশ্চিত করে যে ছবিটি যতই চওড়া হোক না কেন, টেক্সট বডি কন্টেইনারের বাকি উপলব্ধ প্রস্থ পূরণ করতে প্রসারিত হবে।

উপসংহার: অ্যালাইনমেন্টের বাইরে, ইচ্ছাকৃত লেআউটের দিকে

ফ্লেক্সবক্সে দক্ষতা অর্জনের অর্থ কেবল জিনিসগুলোকে centru করা নয়। এটি অক্ষগুলোর মধ্যে পারস্পরিক ক্রিয়া, স্থান বিতরণের যুক্তি এবং আইটেমের আকারের নমনীয়তা বোঝার বিষয়। মাল্টি-লাইন লেআউটের জন্য align-content, ডাইনামিক সাইজিংয়ের জন্য flex শর্টহ্যান্ড, এবং অটো মার্জিনের মতো শক্তিশালী প্যাটার্নগুলোর উপর একটি দৃঢ় দখল অর্জনের মাধ্যমে, আপনি এমন লেআউট তৈরি করতে পারেন যা কেবল দৃশ্যত আকর্ষণীয়ই নয়, বরং শক্তিশালী, রেসপন্সিভ এবং সেমান্টিক্যালি পরিষ্কার।

পরের বার যখন আপনি একটি জটিল লেআউট চ্যালেঞ্জের মুখোমুখি হবেন, তখন ফ্লোট বা জটিল পজিশনিং হ্যাক ব্যবহার করার তাগিদ প্রতিরোধ করুন। পরিবর্তে, নিজেকে জিজ্ঞাসা করুন: এটি কি ইচ্ছাকৃত স্থান বিতরণের মাধ্যমে সমাধান করা যেতে পারে? উত্তরটি, প্রায়শই, সিএসএস ফ্লেক্সবক্সের অ্যাডভান্সড ক্ষমতাগুলোর মধ্যে পাওয়া যাবে।